<template>
	<!-- 巡检计划整改点位(列表) -->
	<view class="check-assets">
		<uni-card :title="lastData.inspPlanName">
			<template v-slot:title>
				<view class="card-title">
					<view>
						<text>{{lastData.inspPlanName}}</text>
					</view>
					<text class="right-txt color1">{{lastData.inspRecordStatusCn}}</text>
					<!-- <text class="right-txt color2">已结束</text> -->
				</view>
			</template>
			<uni-list :border="false">
				<uni-list-item>
					<template v-slot:body>
						<view class="slot-box" style="width: 100%;">
							<view>
								<uni-icons type="shop-filled" size="18" color="#198a6c"></uni-icons>
								<text>{{lastData.storeName}}</text>
							</view>
							<view class="check-name">
								<uni-icons type="calendar" size="14"></uni-icons>{{lastData.inspPlanStartTime}} 至
								{{lastData.inspPlanEndTime}}
							</view>
							<view class="check-name">
								<uni-icons type="compose" size="14"></uni-icons>{{lastData.inspPlanRemarks}}
							</view>
							<view class="check-name">
								计划巡检时间：{{lastData.addTime}}
							</view>
							<view style="display: flex;justify-content: space-between;">
								<text>总巡检项：{{lastData.inspItemQty+""}}</text>
								<text>合格项：{{lastData.inspItemOkQty+""}}</text>
								<view>
									不合格项：<text style="color: #f00;">{{lastData.inspItemNgQty+""}}</text>
								</view>
							</view>
						</view>
					</template>
				</uni-list-item>
			</uni-list>
		</uni-card>

		<view class="content">
			<uni-card v-for="(item,index) in pointList" :key="index">
				<uni-list :border="false">
					<uni-list-item :title="'巡检点位:'+item.inspPositionName">
						<template v-slot:header>
							<view class="slot-box">
								<uni-icons type="location-filled" size="18" color="#198a6c"></uni-icons>
							</view>
						</template>
						<template v-slot:footer>
							<button class="change-point" plain @click="toSubmitChange(item)">整改</button>
						</template>
					</uni-list-item>
					<uni-list-item :border="false">
						<template v-slot:body>
							<view class="slot-box" style="width: 100%;">
								<view style="display: flex;justify-content: space-between;">
									<text class="slot-text">总巡检项：{{item.inspItemQty}}</text>
									<text class="slot-text">合格项：{{item.inspOkItemNums}}</text>
									<view>
										不合格项：<text class="slot-text" style="color: #f00;">{{item.inspNgItemNums}}</text>
									</view>
								</view>
							</view>
						</template>
					</uni-list-item>
				</uni-list>
			</uni-card>
			<view :class="{'bottom-btn':true,'permission-none':isPermission('INSP_IFR_REPORT')}">
				<button class="start-button" @click="submit">上报整改</button>
			</view>
		</view>

	</view>
</template>

<script lang="ts" setup>
	import {
		ref
	} from "vue";
	import {
		onPullDownRefresh,
		onReachBottom,
		onLoad
	} from "@dcloudio/uni-app";
	import {
		getPoss,
		getMainInfo,
		rectifyRep
	} from '@/common/api/inspectionAPI.ts';
	import {isPermission} from '@/common/util/common.ts'

	const lastData = ref({})
	const pointList = ref([])
	const inspRecordId = ref()
	onLoad((params) => {
		inspRecordId.value = params.inspRecordId
		getMainInfo(params.inspRecordId).then(value => {
			if (value.code == 0) {
				lastData.value = value.data
			} else {
				uni.showToast({
					icon:"none",
					title:value.message
				})
			}
		})
		getPlanInfo(params.inspRecordId)
	})

	// 获取点位整改列表
	const getPlanInfo = (inspRecordId) => {
		if(!isPermission('INSP_RECORD_DTL_QUERY')){
			getPoss(inspRecordId).then((res: any) => {
				if (res.code == 0) {
					uni.stopPullDownRefresh(); //关闭下拉
					res.data.forEach(item => {
						if (item.rectifyStatus != null) {
							pointList.value.push(item)
						}
					})
				}
			})
		}
		
	}

	const toSubmitChange = (item) => {
		uni.navigateTo({
			url: `/pages/ipqc/submitInspectChange/index?inspRecordId=${inspRecordId.value}&inspPositionId=${item.inspPositionId}&version=${item.version}`,
		})
	}

	const submit = () => {
		if(!isPermission('INSP_IFR_REPORT')){
			rectifyRep({
				inspRecordId: lastData.value.inspRecordId,
				version: lastData.value.version
			}).then(value => {
				if (value.code == 0) {
					uni.showToast({
						title: value.message,
						icon:"none",
						duration:500
					});
					setTimeout(()=>{
						uni.navigateBack({
							delta: 1
						});
					},500)
					
				} else {
					uni.showToast({
						icon: 'none',
						title: value.message
					});
				}
			})
		}
	}

	onPullDownRefresh(() => {});
	onReachBottom(() => {})
</script>

<style scoped lang="scss">
	uni-page-body {
		height: 100%;
	}

	.check-assets {
		height: 100%;
		// background-color: #f4f4f4;

		.segmented-control {
			background-color: #fff;
		}
	}

	.content {
		:deep(.uni-list-item__container) {
			padding: 5px 20rpx !important;
		}
	}

	.card-title {
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 10px;
		border-bottom: 1px solid #ebeef5;
		position: relative;

		.right-txt {
			font-size: 12px;
			color: #fff;
			padding: 5rpx 20rpx;
			box-sizing: border-box;
			border-radius: 18rpx 0 0 18rpx;
			position: absolute;
			right: -20rpx;
		}

		.color1 {
			background-color: #7098ed;
		}

		.color2 {
			background-color: #999999;
		}
	}

	.uni-list-item {
		font-size: 14px !important;

		.check-time {
			color: #fda659;
		}
	}

	.check-name {
		font-size: 12px;
	}

	.footer-btn {
		display: flex;
	}

	.list-btn {
		background-color: #198a6c;
		color: #fff;
		line-height: 2;
		font-size: 14px;
		margin-left: 10rpx;
	}

	.top-text {
		color: #fd8f1a;
	}

	.start-button {
		width: 60%;
		box-sizing: border-box;
		background-color: #fe8f1b;
		line-height: 2;
		color: #fff;
	}

	.change-point {
		border-color: #fe8f1b;
		color: #fe8f1b;
		height: 50rpx;
		line-height: 50rpx;
		box-sizing: border-box;
		font-size: 14px;
		padding: 0rpx 50rpx;
		border-radius: 25rpx;
	}
</style>
